<template>
  <view class="flex-1">
		<view
		  class="px-5 flex flex-col flex-1"
		  v-if="settingInfo.switchSale == 1"
		>
			<!-- #ifdef MP-WEIXIN -->
			<customNav
				style="position: relative; z-index: 111"
				title="机场信息"
			></customNav>
			<!-- #endif -->
			<view
				class="bg-header"
				:style="{ 'background-image': `url(${settingInfo.defaultPic})` }"
			></view>
			<view class="px-5 -mt-3 pb-14">
				<view>
					<view class="bg-white py-5 px-4 rounded-xl">
						<view class="text-[40rpx] text-black font-semibold leading-[40rpx]">{{
							airInfo.name
						}}</view>
						<view class="text-xs text-[#6C7278] leading-[24rpx] mt-[20rpx]">{{
							airInfo.en_name
						}}</view>
						<view class="aaa p-3 flex justify-between items-center mt-[30rpx]">
							<view
								class="w-[420rpx] text-[#272727] font-medium text-[26rpx] leading-[44rpx]"
								>{{ airInfo.address }}</view
							>
							<view class="flex flex-col items-center" @click="opMap">
								<image src="@/static/lubiao.png" class="w-6 h-6"> </image>
								<view class="text-[#4C4C4C] text-[22rpx] mt-1">导航</view>
							</view>
						</view>
						<view class="flex justify-between items-center mt-[30rpx]">
							<view
								class="w-[188rpx] h-[130rpx] flex-col flex justify-center items-center bg-[#F5F7FA] rounded-[14rpx]"
							>
								<view class="text-[#6C727] text-xs">{{
									airInfo.three_char
								}}</view>
								<view class="text-[#1A1C1E] text-base font-semibold mt-[12rpx]"
									>三字码</view
								>
							</view>
							<view
								class="w-[188rpx] h-[130rpx] flex-col flex justify-center items-center bg-[#F5F7FA] rounded-[14rpx]"
							>
								<view class="text-[#6C727] text-xs">{{ airInfo.four_char }}</view>
								<view class="text-[#1A1C1E] text-base font-semibold mt-[12rpx]"
									>四字码</view
								>
							</view>
							<view
								class="w-[188rpx] h-[130rpx] flex-col flex justify-center items-center bg-[#F5F7FA] rounded-[14rpx]"
							>
								<view class="text-[#6C727] text-xs">{{ airInfo.zone_name }}</view>
								<view class="text-[#1A1C1E] text-base font-semibold mt-[12rpx]"
									>时区</view
								>
							</view>
						</view>
					</view>
					<view class="bg-white pb-5 pt-2 rounded-xl mt-3">
						<up-tabs
							lineHeight="2"
							:list="list1"
							@click="clickTab"
							:current="current"
							lineColor="#4365DE"
							:inactiveStyle="{ color: '#1A1C1E', fontWeight: '700' }"
							:activeStyle="{ color: '#4365DE', fontWeight: '700' }"
							lineWidth="60"
							itemStyle="padding-left: 32rpx; padding-right: 32rpx; height: 45px;"
						></up-tabs>
						<template v-if="current == 0">
							<view class="flex mt-[32rpx] px-4">
								<view class="w-[168rpx] text-base text-[#6C7278]">机场类型</view>
								<view class="text-base font-medium text-[#1A1C1E] ml-5">{{
									airInfo.info_type
								}}</view>
							</view>
							<view class="flex mt-[22rpx] px-4">
								<view class="w-[168rpx] text-base text-[#6C7278]">开放性质</view>
								<view class="text-base font-medium text-[#1A1C1E] ml-5">{{
									airInfo.info_open
								}}</view>
							</view>
							<view class="flex mt-[22rpx] px-4">
								<view class="w-[168rpx] text-base text-[#6C7278]">机场海拔</view>
								<view class="text-base font-medium text-[#1A1C1E] ml-5">{{
									airInfo.info_altitude
								}}</view>
							</view>
							<!-- <view class="flex mt-[22rpx] px-4">
								<view class="w-[168rpx] text-base text-[#6C7278]"
									>最大跑道长度</view
								>
								<view class="text-base font-medium text-[#1A1C1E] ml-5">{{
									airInfo.info_length
								}}</view>
							</view>
							<view class="flex mt-[22rpx] px-4">
								<view class="w-[168rpx] text-base text-[#6C7278]"
									>机场开放时间</view
								>
								<view class="text-base font-medium text-[#1A1C1E] ml-5">{{
									airInfo.info_opentime
								}}</view>
							</view> -->
						</template>
						<template v-else>
							<view class="flex mt-[32rpx] px-4">
								<view class="w-[196rpx] text-base text-[#6C7278]">机场属性</view>
								<view class="text-base font-medium text-[#1A1C1E] ml-5">{{
									airInfo.service_proper
								}}</view>
							</view>
							<view class="flex mt-[22rpx] px-4">
								<view class="w-[196rpx] text-base text-[#6C7278]"
									>公务机通道服务</view
								>
								<view class="text-base font-medium text-[#1A1C1E] ml-5 flex-1">{{
									airInfo.service_open
								}}</view>
							</view>
							<view class="flex mt-[22rpx] px-4">
								<view class="w-[196rpx] text-base text-[#6C7278]">停场服务</view>
								<view class="text-base font-medium text-[#1A1C1E] ml-5">{{
									airInfo.service_stop
								}}</view>
							</view>
							<view class="flex mt-[22rpx] px-4">
								<view class="w-[196rpx] text-base text-[#6C7278]"
									>独立公务机通道</view
								>
								<view class="text-base font-medium text-[#1A1C1E] ml-5 flex-1">{{
									airInfo.service_channel
								}}</view>
							</view>
						</template>
					</view>
					<view class="bg-white py-5 rounded-xl mt-3">
						<view class="text-xl font-medium text-[#1A1C1E] px-4"
							>公务机楼信息</view
						>
						<template v-if="airInfo?.building && airInfo.building.length">
							<view class="px-4">
								<view
									class="flex items-center mt-[30rpx]"
									v-for="item in airInfo.building"
									:key="item.id"
								>
									<image src="@/static/loca.png" class="w-9 h-9"></image>
									<view class="pl-[20rpx] flex-1">
										<view
											class="text-[#1A1C1E] text-base font-medium leading-5"
											>{{ item.name }}</view
										>
										<view class="text-xs text-[#838383] leading-4 mt-1">{{
											item.address
										}}</view>
									</view>
								</view>
							</view>
						</template>
						<view class="flex-1 flex justify-center items-center mt-3" v-else>
							<up-empty
								textSize="14"
								textColor="#222222"
								text="暂无公务机楼信息"
								icon="/static/empty.png"
								width="64"
								height="64"
							>
							</up-empty>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="w-full flex-1 h-full flex flex-col bg-white">
		  <image
		    class="w-full"
		    mode="widthFix"
		    src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/222.jpg"
		  ></image>
		</view>
  </view>
</template>

<script setup lang="ts">
import { getAirPortDetail_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import { onLoad, onPageScroll, onShareAppMessage } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);

const current = ref(0);
const airInfo = ref("");
const getDetail = (id) => {
  getAirPortDetail_api(id).then((res) => {
    airInfo.value = res;
  });
};
onLoad(({ id }) => {
  getDetail(id);
});
const clickTab = (e) => {
  current.value = e.index;
};

const opMap = () => {
  uni.openLocation({
    latitude: +airInfo.value.lat,
    longitude: +airInfo.value.lng,
    success: function () {
      console.log("success");
    },
    fail: (err) => {
      console.log(err, "eeeeeeee");
    },
  });
};

onPageScroll((e) => {});
const list1 = reactive([{ name: "机场信息" }, { name: "机场服务" }]);

onShareAppMessage(() => {
  return {
    title: "私人飞机买卖、包机、咨询，专业团队为您提供全流程服务",
    path: `/pages/index/planeInfo?id=${airInfo.value.id}`,
    imageUrl: settingInfo.value.shareImg,
  };
});
</script>

<style lang="scss" scoped>
.aaa {
  background: url("https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/location.png");
  width: 100%;
  height: 136rpx;
  background-size: 100% 100%;
}
.bg-header {
  // background: url("https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/fly-2.png");
  width: 100%;
  height: 468rpx;
  background-size: 100% 100%;
}
</style>
